<template>
	<div class="box">
		<div class="dianpu">
			<span class="iconfont icon-shangpu"></span>
			<p>店铺</p>
		</div>
		<div class="gouwu"><span class="iconfont icon-gouwuche"></span><p>购物车</p></div>
		<div class="fukuan">
			<div class="an">加入购物车</div>
			<div class="liji">立即购买</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"Shopping",
		data:function(){
			return{
				
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 0.55rem;
		background-color:#fff;
		display: flex;
		border-top: 0.01rem solid #EDEDED;
		align-items: center;
		justify-content: space-around;
	}
	.box .dianpu,.box .gouwu{
		width: 13%;
		height: 0.4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.box .dianpu .icon-shangpu,.box .gouwu .icon-gouwuche{
		font-size: 0.25rem;
		color: #444545;
	}
	.box .dianpu p,.box .gouwu p{
		font-size: 0.09rem;
		font-weight: bold;
		color: #303133;
	}
	.box .an,.box .liji{
		width: 50%;
		line-height: 0.4rem;
		text-align: center;
	}
	.fukuan{
		width: 67%;
		height: 0.4rem;
		display: flex;
		color: #fff;
		font-size: 0.13rem;
		font-weight: bold;
		align-items: center;
	}
	.box .an{
		border-radius: 0.19rem 0 0 19px;
		background: linear-gradient(to right, #F0CE7B,40% ,#DDB152 80%);
	}
	.box .liji{
		border-radius: 0 0.19rem 19px 0;
		background: linear-gradient(to right, #F04D2E,40% ,#D61211 80%);
	}
</style>
